<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>工作计划</title>
<style type="text/css">
* {
	font-size: 12px;
	margin: 0px;
	padding: 0px;
}
.hh {
	float: left;
	width: 100%;
	height: auto;
	background-color: #EEE;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #999;
}
#contextMenu span {
	float: left;
	width: 95%;
	height: 22px;
	line-height: 22px;
	padding-left: 5%;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #CCC;
}
#contextMenu span:hover{
	background-color: #09F;
	color: #FFF;
}
#title {
	float: left;
	height: 45px;
	width: 100%;
	background-color: #0683FF;
	line-height: 45px;
	font-weight: bold;
	font-size: 14px;
	text-align: center;
	position: fixed;
	z-index: 99;
	top: 0px;
	margin-bottom: 45px;
	color: #FFF;
}
.hh .hous {
	float: left;
	width: 12%;
	text-align: center;
	height: auto;
	padding-top: 15px;
	padding-bottom: 15px;
	background-color: #7BF;
}
.hh .hous_body {
	float: left;
	width: 87%;
	height: auto;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 1%;
}
#contextMenu {
	background-color: #BBE9FF;
	z-index: 101;
	position: absolute;
	width: 75px;
	border: 1px solid #09F;
	cursor: default;
	display: none;
}
</style>
<link href="../css/time.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery-1.8.3.min.js"></script>
<script src="../js/nongli.js"></script>
<script src="../js/time.js"></script>
<script>
var message=[];
	
	var offX=0;
	var offY=0;
	var st = false;
	
	$(function(){
		showDate(new Date()+1);
		$(window).resize(function(){
			<!--alert('0');-->	
		});
		
		$('#now_month').mouseup(function(){
			st = false;	
			$('#now_month').css('cursor','default');
		});
		
		document.addEventListener("mousemove",function(e){
			if(st){
			        var eventX  = e.clientX-offX;
					var eventY = e.clientY-offY;
					var timeH =$('#time_body'); 
					timeH.css('left',eventX+'px');
					timeH.css('top',eventY+'px');
				}
		});
		
		$('#contextMenu span').click(function(){
			menuOpen(this);	
		});
		
	});	
	
	
	
	<!-- 按下鼠标-->
	function down(e){
			st = true;
			$('#now_month').css('cursor','move');
			offX = e.offsetX;
			offY = e.offsetY;
	}
	
	<!--鼠标移出 -->
	function umove(e){
			if(st){
			        var eventX  = e.clientX-offX;
					var eventY = e.clientY-offY;
					var timeH =$('#time_body'); 
					timeH.css('left',eventX+'px');
					timeH.css('top',eventY+'px');
				}
	}
	
	
	function showDate(date){
		var date = new Date();
		$('#title').html(date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate());
		showWorkPlan(date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate());
	}
	
	function menuOpen(obj){
		var dateStr = date.getFullYear()+'-'+(1+date.getMonth())+'-'+$('#selectDay').val();
		switch(obj.innerHTML){
			case "查看":showWorkPlan(dateStr);break;
			case "新增计划":window.open('addWorkPlan.jsp?time='+dateStr,'add','height=370,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no,z-look=yes,alwaysRaised=yes');break;
		}
		$('#contextMenu').hide(300);
	}
	
	function showWorkPlan(start){
		var dd = new Date();
		$('#title').html(start);
		$.getJSON('findWorkPlan.action',{'start':start,'q':dd.getTime()},function(data){
			message=data;
			init();
		});
	}
	
	function getHouse(str){
		str = str.substring(str.indexOf(' '),str.length)
		return str.substring(0,str.indexOf(':'));
	}
	
	function init(){
			$('#times').html('<div class="hh"><div class="hous">0:00</div><div class="hous_body"></div></div>');
			for(var i=0;i<message.length;i++){
				$('#times').append('<div class="hh"><div class="hous">'+message[i].time+'</div><div class="hous_body">'+message[i].title+'</div></div>');
			}
	}
	
</script>
</head>

<body>
<input name="selectDay" id="selectDay" type="hidden" value="" />
<div id="contextMenu">
  <span>查看</span>
  <span>新增计划</span>
  <span>测试</span>
</div>

<div id="title">2013-3-22</div>



<!--日历-->
<div id="time_body">
  <div id="top">
	<div id="upMonth">上一月</div>
    <div id="now_month" onmousedown="down(event);" >2013年3月</div>
    <div id="botmMonth">下一月</div>
  </div>
  
  <div id="wekday">
  	<div class="wday">星期日</div>
    <div class="wday">星期一</div>
    <div class="wday">星期二</div>
    <div class="wday">星期三</div>
    <div class="wday">星期四</div>
    <div class="wday">星期五</div>
    <div class="wday">星期六</div>
  </div>
  
  <div id="days">
  	
    <div class="day">
   	  <span class="gongli">公历</span>
   	  <span class="nongli">农历</span>
      <span class="shixiang">待办事项</span>
    </div>
    
  </div>
</div>
<!--end-->





<div id="times">
    <div class="hh">
      <div class="hous">0:00</div>
      <div class="hous_body"></div>
    </div>
    
    
</div>
</body>
</html>
